<!--
关注
 -->
<template>
  <div>
    <noMore v-if="followdata.length == 0"></noMore>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的关注" name="0">
        <div class="Follow" v-for="(item, index) in followdata" :key="index">
          <div class="FollowBox">
            <div class="FollowLeft">
              <div class="FollowBoxTitle">
                <img
                  class="headimg"
                  :src="item.followid.head_portrait | imgF"
                />
                <div class="headText">
                  <div class="headName">{{ item.followid.name }}</div>
                  <div class="headAboat">
                    {{ item.followid.autograph }}
                  </div>
                </div>
              </div>
            </div>
            <div class="FollowRight">
              <el-button
                class="FollowBtn"
                @click="toOtherPerson(item.followid._id)"
                >去TA主页</el-button
              >
            </div>
          </div>

          <el-divider></el-divider>
        </div>
      </el-tab-pane>
      <el-tab-pane label="谁关注我" name="1">
        <div class="Follow" v-for="(item, index) in followdata" :key="index">
          <div class="FollowBox">
            <div class="FollowLeft">
              <div class="FollowBoxTitle">
                <img class="headimg" :src="item.userid.head_portrait | imgF" />
                <div class="headText">
                  <div class="headName">{{ item.userid.name }}</div>
                  <div class="headAboat">
                    {{ item.userid.autograph }}
                  </div>
                </div>
              </div>
            </div>
            <div class="FollowRight">
              <el-button
                class="FollowBtn"
                @click="toOtherPerson(item.userid._id)"
                >去TA主页</el-button
              >
            </div>
          </div>

          <el-divider></el-divider>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="limitSize"
      layout="prev, pager, next, jumper"
      :total="RecordeSize"
    ></el-pagination>
  </div>
</template>

<script>
import { defaultAvatarURL } from "../../../utils/global";
import noMore from "../../../components/noMore";
import { get_follow } from "../../../api/follow";
// import { delete } from "vue/types/umd";
export default {
  name: "myFollow",
  components: {
    noMore
  },
  filters: {
    imgF(val) {
      return defaultAvatarURL + val;
    }
  },
  data() {
    return {
      currentPage4: 4,
      skipSize: 0, //开始位置
      RecordeSize: 0, //总文章
      limitSize: 10,
      followdata: [],
      activeName: "0",
      reqdata: {
        query: {
          userid: this.$store.getters.userInfo._id
        },
        populate: JSON.stringify([{ path: "followid" }]),
        sort: { _id: -1 },
        skip: this.skipSize,
        limit: this.limitSize,
        count: true
      }
    };
  },
  created() {
    this.get_followdata();
  },
  methods: {
    async get_followdata() {
      var req = this.reqdata;
      var followdata = await get_follow(req);
      this.RecordeSize = followdata.countnum;
      this.followdata = followdata.data;
      console.log("关注", followdata);
    },
    handleClick(event) {
      console.log(event.index);
      switch (event.index) {
        case "0":
          delete this.reqdata;
          this.skipSize = 0;
          console.log(this.reqdata);
          this.reqdata = {
            query: {
              userid: this.$store.getters.userInfo._id
            },
            populate: JSON.stringify([{ path: "followid" }]),
            sort: { _id: -1 },
            skip: this.skipSize,
            limit: this.limitSize,
            count: true
          };
          this.get_followdata();
          break;
        case "1":
          delete this.reqdata;
          this.skipSize = 0;
          console.log(this.reqdata);
          this.reqdata = {
            query: {
              followid: this.$store.getters.userInfo._id
            },
            populate: JSON.stringify([{ path: "userid" }]),
            sort: { _id: -1 },
            skip: this.skipSize,
            limit: this.limitSize,
            count: true
          };
          this.get_followdata();
          break;
        default:
          break;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.get_data();
    },
    //其他用户主页
    toOtherPerson(val) {
      if (val == this.$store.getters.userInfo._id) {
        this.$router.push({
          path: "/personalCenter",
          query: {}
        });
        return;
      }
      this.$router.push({
        path: "/otherPerson",
        query: {
          user_id: val
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Follow {
  .FollowBox {
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .FollowLeft {
      width: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .FollowBoxTitle {
        display: flex;
        align-items: center;
        .headimg {
          height: 60px;
          width: 60px;
          border-radius: 50%;
        }
        .headText {
          margin: 0 0 0 24px;
          display: flex;
          flex-direction: column;
          .headName {
            font-size: 20px;
            font-weight: 550;
          }
          .headAboat {
            font-size: 14px;
            margin: 4px 0;
            color: #808080;
            color: #6c6c6c;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
            -webkit-box-orient: vertical;
          }
          .headTell {
            display: flex;
            font-size: 14px;
            width: 160px;
            .Follower {
              margin-left: 10px;
            }
          }
        }
      }
    }
    .FollowRight {
      display: flex;
      align-items: center;
      padding: 30px 0 0 0;
      .FollowBtn {
        color: #ffffff;
        background-color: #8590a6;
      }
    }
  }
}
</style>
